<!DOCTYPE html>
<html ng-app="chargingApp">

<head>
	<meta charset="utf-8"/>
	<title></title>

	<link rel="stylesheet" href="css/page-styles.css" />
	<link rel="stylesheet" href="css/style.css" />
	<style type="text/css">
/*		.logo img{
			width: 250px;
			height: 270px;
		}*/
		.logo{
			float: left;
		}
		.border-left{
			border-left: 6px solid #fff;
			padding-left: 50px; 
		}
		.bottom-p{
			font-size: 85px;
			    padding-left: 85px;
		}
		.name-vka{
			background: #e3e3e3;
			height: 374px;
    		color: #000;
			font-size: 80px;
			margin-top: 30px;
			border-top-left-radius: 0;
    		border-top-right-radius: 0;
			border-bottom-right-radius: 12px;
    		border-bottom-left-radius: 12px;
    		line-height: 110px;
		}
		.tips-img{
			position: absolute;
			left: 600px;
			top: 600px;
		}
		.arrows{
			width: 0;
	    	height: 0;
		     border-top: 75px solid transparent;
		     border-left: 75px solid #fff;
		     border-bottom: 75px solid transparent;
		     position: absolute;
    top: 190px;
    right: 99px;
		}
		.handle{
			width: 100px;
			height: 25px;
			background: #fff;
			position: absolute;
	    	top: -9px;
    		right: 60px;
		}
		.chargeA .picB{
			padding-left: 1060px;
    		padding-bottom: 106px;
		}
		.font_color{
			  color: #777879;
		}
	</style>
</head>

<body ng-controller="chargingController">
	<div id="DCpile">
		<div id="top">
			<div class="more-info">
				<div class="logo">
					<img src="img/dz_logo.png" />
				</div>
					<div class="weather">

					<ul class="border-left">
						<li>
							<span id="weather" ng-bind="weatherList.weather"></span>
						</li>
						<li>
							<span id="city_temperature" ng-bind="weatherList.city_temperature"></span>
							℃
						</li>
					</ul>
					<div class="border">
						<ul class="Airquality" style="background:#84df33" 
						ng-if="weatherList.pm25 <= 35">
							<li>PM2.5</li>
							<li> <em id="pm25" ng-bind="weatherList.pm25"></em> 
							<em id="pm_level" ng-bind="weatherList.pm_level"></em>
							</li>
						</ul>
						<ul class="Airquality" style="background:#f09e4e" 
						ng-if="weatherList.pm25 > 35 && weatherList.pm25 <= 53">
							<li>PM2.5</li>
							<li> <em id="pm25" ng-bind="weatherList.pm25"></em> 
							<em id="pm_level" ng-bind="weatherList.pm_level"></em>
							</li>
						</ul>
						<ul class="Airquality" style="background:#f17c73"
						ng-if="weatherList.pm25 > 54 && weatherList.pm25 <= 70">
							<li>PM2.5</li>
							<li> <em id="pm25" ng-bind="weatherList.pm25"></em> 
							<em id="pm_level" ng-bind="weatherList.pm_level"></em>
							</li>
						</ul>
						<ul class="Airquality" style="background:#ce30ff" 
						ng-if="weatherList.pm25 > 70">
							<li>PM2.5</li>
							<li> <em id="pm25" ng-bind="weatherList.pm25"></em> 
							<em id="pm_level" ng-bind="weatherList.pm_level"></em>
							</li>
						</ul>
					</div>

				</div>
				<ul class="date">
					<li id="date"></li>
					<li id="week"></li>
					<li id="now"></li>
				</ul>

			</div>
			<div class="dz-msg">
				<div class="dz-type"></div>
				<ul>
					<li>
						<span ></span>
					</li>
					<li>
						<span ></span>
					</li>
					<li>
						<span ></span>
					</li>
				</ul>
			</div>
			<div class="dz-number">
				<div class="num">4<span>#</span></div>
				<p class="bottom-p" ng-if="chargingObj.charger_type==1">直流桩</p>
				<p class="bottom-p" ng-if="chargingObj.charger_type==2">交流桩</p>
				<div class="arrows"><div class="handle"></div></div>
			</div>
		</div>
		<div id="container">
			<div class="tips-img"><img src="img/img_tips.png"></div>
			<div ng-repeat="state in chargingObj.stateList track by $index" 
			ng-class="{chargeA:$index%2!=0,chargeB:$index%2==0}">
				<div class="name" 
				ng-class="{trianglegreen:state.charge_status==0,
				triangle:state.charge_status==1,
				triangleblue:state.charge_status==2}">
				<span ng-if="$index%2!=0">B:枪口</span>
				<span ng-if="$index%2==0">A:枪口</span>
				<ul class="name-vka">
				<li ng-if="state.charger_v!==null"><span ng-bind="state.charger_v"></span> V</li>
				<li style="padding-left: 35px;" ng-if="state.charger_p!==null"><span ng-bind="state.charger_p">36</span> KW</li>
				<li style="padding-right: 20px;" ng-if="state.charger_i!==null"><span ng-bind="state.charger_i">32</span> A</li>
				<li ng-if="state.charger_v==null"><span>-</span> V</li>
				<li style="padding-left: 35px;" ng-if="state.charger_p==null"><span>-</span> KW</li>
				<li style="padding-right: 20px;" ng-if="state.charger_i==null"><span>-</span> A</li>
				</ul>
				</div>
				<div id="port2">
					<div class="picA" ng-if="state.charge_status==2">
						<div class="bigcircle">
							<div id="circle{{$index+1}}" class="second circle second anim-flip show"> 
							<strong></strong>
								<img class="pic" src="img/circle1.png" />
								<img class="battery" src="img/batteryM1.png" ng-if="!!!state.soc||state==0"/>

								<img class="battery" src="img/batteryM2.png" 
								ng-if="!!state.soc&&state.soc > 0 && state.soc <= 33"/>

								<img class="battery" src="img/batteryM3.png" 
								ng-if="!!state.soc && state.soc>33 && state.soc<=66"/>

								<img class="battery" src="img/batteryM4.png" 
								ng-if="!!state.soc && state.soc > 66"/>
								
							</div>
							<div id="circlehidden{{$index+1}}" class="circlehidden">
								<strong></strong>
							</div>
						</div>

					</div>
					<div class="chargeingType" ng-if="state.charge_status==2&&!!state.soc">
					用户{{state.user_pay_card}}充电中...
					</div>
					<div class="chargeingType" ng-if="state.charge_status==2&&!!!state.soc" style="height: 68px">
					</div>
	



					<div class="picB" ng-if="state.charge_status==1">
						<img  src="img/dc-b.png" />
						<img class="userpic" src="img/user.png" />
					</div>
					<div class="picB" ng-if="state.charge_status==0" style="padding-top: 352px;">
						<img src="img/free-1.png" />
					</div>
					<div class="picB" ng-if="state.charge_status!==0&&state.charge_status!==1&&state.charge_status!==2" style="padding-top: 1160px;">
					</div>



					
					<div class="chargeingType" ng-if="state.charge_status==1">
						已被用户
						<span id="u_id" ng-bind="state.user_pay_card"></span>
						预约
					</div>
					<div class="chargeingType_1" ng-if="state.charge_status==0" style="">
						空闲中...
					</div>

					<ul class="currentInfo" ng-class="{font_color:state.charge_status==1||state.charge_status==0}">
						<li>
							<ul>
								<li>已充电量</li>
								<li>
									<span ng-bind="state.charger_kwh"> </span>
								</li>
							</ul>
						</li>
						<li>
							<ul>
								<li>预计剩余时间</li>
								<li>
									<span ng-bind="state.remaining_time"></span>
									
								</li>
							</ul>
						</li>
						<li>
							<ul>
								<li>电池温度</li>
								<li>
									<span ng-bind="state.battery_temperature"></span>
									
								</li>
							</ul>
						</li>

					</ul>
				</div>

			</div>
		</div>

	</div>

	<script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
	<script type="text/javascript" src="js/date.js"></script>
	<script type="text/javascript" src="js/circle-progress.js"></script>
	<script type="text/javascript" src="js/angular.js"></script>
	<script type="text/javascript" src="js/charging_Angular.js"></script>
	<script type="text/javascript" src="js/chargingService.js"></script>
</body>

</html>